<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>入住情况</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <script type="text/javascript" src="../../script/aes.js"></script>
	<script type="text/javascript" charset="UTF-8" src="../../script/naes.js"></script>
	<script type="text/javascript" src="../../script/modeecb.js"></script>
    <script type="text/javascript" src="../../script/tmd5.js"></script>
    <script type="text/javascript" src="../../script/constants.js"></script>
    <script type="text/javascript" src="../../resource/jquery214.js"></script>
    <script src="../../script/api.js"></script>
    <style>
    	body{
    		margin: 0;
    	}
    	.title{
    	    height: 45px;
    	    background: #0483d3;
    	    line-height: 45px;
    	    font-size: 20px;
    	    margin-bottom: 20px;
    	    position:fixd;
    	    position:fixed;
            margin-top:0; 
            width: 100%;
    	}
    	.RM_NUM{
    	    color: #fff;
    	    font-size: 24px;
    	    padding-left:5px;
    	}
    	.RM_M{
    	    color: #fff;
    	    font-size: 14px;
    	    padding-left:5px;
    	}
    </style>
</head>
<body>
<header id="statusBar">
<div class="title">
    <div style="float: left;width: 30px;height: 30px;padding: 7.5px;" onclick="api.closeWin();">
    <img src="../../image/hotelManage/back.png"  style="width: 100%;"/>
    </div>
    <div style="float: left;color: #ffffff;">
     入住情况
    </div>
  </div>
  </header>
  <div style="height: 45px;"></div>
	<div style="background: #e1e5ee;height: 45px;line-height: 45px;">
	   <div style="color: #707070;float: left;padding-left: 5%;width: 45%;" id="use">
	   </div>
	   <div style="float: left;margin-left: 10%;">
	   <div style="color: #707070;margin:auto 0;" id="unuse">
	   </div>
	   </div>
	</div>
	<div style="background: #e1e5ee;height: 45px;line-height: 45px;">
	   <div style="color: #707070;float: left;width: 45%;padding-left: 5%;" id="sum">
	   </div>
	   <div style="float: left;margin-left: 10%;width: 40%;" onclick="selectDate();">
	   <div style="color: #707070;float: left;" id="date">
	   </div>
	   <div style="width:20%;float: left;display: table-cell; vertical-align: middle;">
	   <img src="../../image/hotelManage/dow.png" style="width: 100%;vertical-align: middle;"/>
	   </div>
	   </div>
	</div>
	<div style="margin-bottom: 80px;" id="room" >

	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
	apiready = function(){
	
	    if(api.systemType == "ios"){
		   document.getElementById("statusBar").style.background = "#298cb4";
		}
	    $api.fixStatusBar( $api.dom('header') );
	    
	    var hotalId = $api.getStorage("hotelId");
	    $("#date").html(getNowFormatDate());
	    var UILoading = api.require('UILoading');
	    UILoading.flower({
		    center: {
		        x: api.winWidth/2.0,          
		        y: api.winHeight/2.0 
		    },
		    size: 30,
		    mask: "rgba(0,0,0,0.5)",
		    fixed: true
	    }, function(ret) {
		    uiId = ret.id;
	    });
	    var callback = function(ret, err){
	        //console.log(JSON.stringify(ret));
	        UILoading.closeFlower({
			    id: uiId
			});
	        showRoom(ret.room);
	    }
	    var content = {"hotelId": hotalId,"date": getNowFormatDate()};
	    apiAjax(JSON.stringify(content),url.occHistory,callback);
	};
	
	
	function selectDate(){
	    var hotelId = $api.getStorage("hotelId");
		api.openPicker({
		    type: 'date',
		    title: '选择时间'
		}, function(ret, err) {
		    if (ret) {
		        var month = "";
		        var day = "";
		        if(ret.month>0&&ret.month<10){
		          month = "0"+ret.month;
		        }else{
		          month = ret.month;
		        }
		        if(ret.day>0&&ret.day<10){
		          day = "0"+ret.day;
		        }else{
		          day = ret.day;
		        }
		        date = ret.year+"-"+month+"-"+day;
		        $("#date").html(date);
			    var callback = function(ret, err){
			        //console.log(JSON.stringify(ret));
			        showRoom(ret.room);
			    }
			    var content = {"hotelId": hotelId,"date":date};
			    apiAjax(JSON.stringify(content),url.occHistory,callback);
		    } else {
		        alert(JSON.stringify(err));
		    }
		});
	}
	
	function showRoom(room){
	   var margin = (api.winWidth-3*90)/4;
	   var html = "";
       var data = eval("("+room+")");
       var price = 0;
       var usenum = 0;
       var unuse = 0;
         var count = data.length;
         $("#total").html("房间数量："+count+"间");
         var line = Math.ceil(count/3);
         for(var j = 0;j<line;j++){
	        var column = 3;
	        html += "<div style=\"margin-top: 15px;\">";
	        if(j == line-1 && count%3 != 0){
	          column = count%3;
	        }
		    for(var i = 0;i < column;i++){
		       var n = 3*j+i;
		       if(data[n].roomstatus == "0"){
		          unuse = unuse + 1;
		          html += "<div style=\"border-radius:10px;height: 90px;width: 90px;background: #707070;float: left;margin-left: "+margin+"px\" >";
		       }else if(data[n].roomstatus == "1"){
		          usenum = usenum + 1;
		          //var rzxx = eval("("+data[n].rzxx+")");
		          for(var k=0;k<data[n].rzxx.length;k++){
		             price = price + parseFloat(data[n].rzxx[k].fjje); 
		          }
		          html += "<div style=\"border-radius:10px;height: 90px;width: 90px;background: #7CCD7C;float: left;margin-left: "+margin+"px\" >";
		       }else if(data[n].roomstatus == "2"){
		          html += "<div style=\"border-radius:10px;height: 90px;width: 90px;background: #5CACEE;float: left;margin-left: "+margin+"px\" >";
		       }
		       html +="<div class=\"RM_NUM\">"+data[n].roomnum+"</div>"
		            +"<div class=\"RM_M\">"+data[n].price+"元/天</div>"
		            +"<div class=\"RM_M\">"+data[n].maxpeople+"人间</div>"
		            +"</div>";
		    }
		    html += "</div><div style=\"clear:both;\"></div>";
	     }
	     $("#use").html("使用房间："+usenum+"间");
	     $("#unuse").html("空闲房间："+unuse+"间");
	     $("#sum").html("房费统计："+price+"元");
	     document.getElementById("room").innerHTML = html;
      }
      
      function getNowFormatDate() {
	    var date = new Date();
	    var seperator1 = "-";
	    var seperator2 = ":";
	    var month = date.getMonth() + 1;
	    var strDate = date.getDate();
	    var minu = date.getMinutes();
	    if (month >= 1 && month <= 9) {
	        month = "0" + month;
	    }
	    if (strDate >= 0 && strDate <= 9) {
	        strDate = "0" + strDate;
	    }
	    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
	    return currentdate;
	} 
</script>
</html>